<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>vue-数据绑定</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .test{
            background-color: skyblue;
            width: 100px;
            height: 25px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="app">
        <div>
            <h1>数据绑定</h1>
            <span :title="msg">悬停一下</span>
            <button @click=changeIf>if</button>
            <button @click=changeShow>show</button>
            <input type="text" v-model=inMsg>
            <div class="test" v-if='testIf'>v-if</div>
            <div class="test" v-show="testShow">v-show</div>
            <div class="test" >{{inMsg}}</div>
        </div>
        <div>
            <h1>计算属性</h1>
            <div>Original message:{{message}}</div>
            <div>Computed message:{{computedMsg}}</div>
            <div>method message:{{methodMsg()}}</div>
        </div>
        <div>
            <h1>侦听器</h1>
            <div>
                <span>ask a yes/no question:</span>
                <input type="text" v-model='question'>
                <div>{{answer}}</div>
                <img :src="answerImg" alt="No image!">
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                msg:"加载时间" + new Date().toLocaleString(),
                testIf:false,
                testShow:true,
                inMsg:'input',
                message:"hello",
                question:null,
                answer:'I cannot give you an answer until you ask question!',
                answerImg:null,
            },
            methods: {
                changeIf(){
                    this.testIf = !this.testIf
                },
                changeShow(){
                    this.testShow = !this.testShow
                },
                methodMsg(){
                    return this.message.split('').reverse().join('')
                },
                getAnswer(){
                    if(this.question.indexOf('?') === -1){
                        this.answer = 'questions usually contain a question mark'
                        return
                    }
                    this.answer = 'thinking……'
                    axios.get('https://yesno.wtf/api')
                    .then((res)=>{
                        console.log(res.data.image)
                        this.answerImg = res.data.image
                        this.answer = _.capitalize(res.data.answer)
                    })
                    .catch((error)=>{
                        this.answer = 'Error! Could not reach the API ' + error
                    })
                }
            },
            computed: {
                // 计算属性的getter
                computedMsg(){
                    return this.message.split('').reverse().join('')
                }
            },
            created:function(){
                // '_.debounce'是一个通过Lodash限制操作频率的函数
                // 
                this.debouncedGetAnswer = _.debounce(this.getAnswer,500)
            },
            watch: {
                // 如果question发生改变，这个函数就会运行
                question:function(newQuestion,oldQuestion){
                    this.answer = 'Waiting for you to stop typing……'
                    this.debouncedGetAnswer()
                }
            },
        })
    </script>
</body>
</html>